<html>
 <head></head>
 <body>
  <div class="demo">
   <span id="demo-setting"><i class="fa fa-cogs fa-spin txt-color-blueDark"></i></span>
   <form>
    <legend class="no-padding margin-bottom-10">Layout Options</legend>
    <section>
     <label><input name="subscription" id="smart-fixed-header" type="checkbox" class="checkbox style-0" /><span>Fixed Header</span></label>
     <label><input type="checkbox" name="terms" id="smart-fixed-navigation" class="checkbox style-0" /><span>Fixed Navigation</span></label>
     <label><input type="checkbox" name="terms" id="smart-fixed-ribbon" class="checkbox style-0" /><span>Fixed Ribbon</span></label>
     <label><input type="checkbox" name="terms" id="smart-fixed-footer" class="checkbox style-0" /><span>Fixed Footer</span></label>
     <label><input type="checkbox" name="terms" id="smart-fixed-container" class="checkbox style-0" /><span>Inside <b>.container</b></span></label>
     <label style="display:block;"><input type="checkbox" name="terms" id="smart-rtl" class="checkbox style-0" /><span>RTL Support</span></label>
     <label style="display:block;"><input type="checkbox" id="smart-topmenu" class="checkbox style-0" /><span>Menu on <b>top</b></span></label>
     <label style="display:block;"><input type="checkbox" id="colorblind-friendly" class="checkbox style-0" /><span>For Colorblind
       <div class="font-xs text-right">
        (experimental)
       </div></span></label>
     <span id="smart-bgimages"></span>
    </section>
    <section>
     <h6 class="margin-top-10 semi-bold margin-bottom-5">Clear Localstorage</h6>
     <a href="javascript:void(0);" class="btn btn-xs btn-block btn-primary" id="reset-smart-widget"><i class="fa fa-refresh"></i> Factory Reset</a>
    </section>
    <h6 class="margin-top-10 semi-bold margin-bottom-5">SmartAdmin Skins</h6>
    <section id="smart-styles">
     <a href="javascript:void(0);" id="smart-style-0" data-skinlogo="img/logo.png" class="btn btn-block btn-xs txt-color-white margin-right-5" style="background-color:#4E463F;"><i class="fa fa-check fa-fw" id="skin-checked"></i>Smart Default</a>
     <a href="javascript:void(0);" id="smart-style-1" data-skinlogo="img/logo-white.png" class="btn btn-block btn-xs txt-color-white" style="background:#3A4558;">Dark Elegance</a>
     <a href="javascript:void(0);" id="smart-style-2" data-skinlogo="img/logo-blue.png" class="btn btn-xs btn-block txt-color-darken margin-top-5" style="background:#fff;">Ultra Light</a>
     <a href="javascript:void(0);" id="smart-style-3" data-skinlogo="img/logo-pale.png" class="btn btn-xs btn-block txt-color-white margin-top-5" style="background:#f78c40">Google Skin</a>
     <a href="javascript:void(0);" id="smart-style-4" data-skinlogo="img/logo-pale.png" class="btn btn-xs btn-block txt-color-white margin-top-5" style="background: #bbc0cf; border: 1px solid #59779E; color: #17273D !important;">PixelSmash</a>
     <a href="javascript:void(0);" id="smart-style-5" data-skinlogo="img/logo-pale.png" class="btn btn-xs btn-block txt-color-white margin-top-5" style="background: rgba(153, 179, 204, 0.2); border: 1px solid rgba(121, 161, 221, 0.8); color: #17273D !important;">Glass </a>
     <a href="javascript:void(0);" id="smart-style-6" data-skinlogo="img/logo-pale.png" class="btn btn-xs btn-block txt-color-white margin-top-6" style="background: #2196F3; border: 1px solid rgba(0, 0, 0, 0.3); color: #FFF !important;">MaterialDesign <sup>beta</sup> </a>
    </section>
   </form>
  </div>
 </body>
</html>